<template>
  <div class="newsContainer">
        <!-- 标题部分 -->
      <h1 class="title">{{newsinfoList.title}}</h1>
      <!-- 二级标题部分 -->
      <p class="subtitle">
        <span>发表:{{newsinfoList.add_time | dataForm}}</span>
        <span>点击:{{newsinfoList.click}}</span>
      </p>
      <hr>
      <!-- 主体内容部分  -->
      <div class="content" v-html='newsinfoList.content'></div>
      <!-- 评论部分 -->
      <comment1 :id='this.id'></comment1>
  </div>
</template>

<script>
import { toast } from "mint-ui";
import comment from './comment.vue'
export default {
  data() {
    return {
      id: this.$route.params.id,
      newsinfoList: []
    };
  },
  created() {
    this.getNewsInfoList();
  },
  methods: {
    getNewsInfoList() {
      this.$http.get("api/getnew/" + this.id).then(res => {
        if (res.body.status === 0) {
          this.newsinfoList = res.body.message[0];
        //   console.log(this.newsinfoList);
        } else {
          toast("请求数据失败");
        }
      });
    }
  },
  components:{
      "comment1":comment
  }
};
</script>

<style lang="scss" scoped>
.newsContainer {
  padding: 0 4px;
  .title {
    font-size: 14px;
    color: red;
    margin: 15px 0;
    text-align: center;
  }
  .subtitle {
    font-size: 13px;
    color: blue;
    display: flex;
    justify-content: space-between;
  }
  .content {
    color: #eee;
  }
}
</style>